<template>
  <div class="container bgc">
    <div class="w1300">
      <breadcrumb title="订单确认" currentPath="/mall/goods/order-confirm" />
      <div class="con-box">
        <!--收货地址-->
        <user-address></user-address>
        <!-- 配送方式 -->
        <transport-way></transport-way>
        <!-- 发票信息 -->
        <invoice-detail></invoice-detail>
        <!--收货信息-->
        <order-table-detail></order-table-detail>
        <!-- 优惠券 -->
        <order-coupon></order-coupon>
        <!--订单结算信息-->
        <order-result-info></order-result-info>
        <div class="btn-result-wrap flex">
          <el-button>取消订单</el-button>
          <el-button type="primary">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
import OrderResultInfo from '@/pages/mall/views/order/components/OrderResultInfo.vue'
import OrderTableDetail from '@/pages/mall/views/order/components/OrderTableDetail.vue'
import OrderCoupon from '@/pages/mall/views/order/components/OrderCoupon.vue'
import UserAddress from '@/pages/mall/components/UserAddress.vue'
import TransportWay from '@/pages/mall/views/order/components/TransportWay.vue'
import InvoiceDetail from '@/pages/mall/views/order/components/InvoiceDetail.vue'
</script>

<style scoped lang="scss">
.container {
  overflow: hidden;

  .con-box {
    padding: 50px 28px;
    margin-bottom: 50px;
    background-color: #fff;

    .btn-result-wrap {
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}
</style>
